<template>
  <div class="learn">
      <div class="header">
           <span v-on:click="back"><img src="/learning/jiantou.jpg" alt=""></span>
           <h3>学习报告</h3>
      </div>
    <div class="big">
        <div class="nav">
            <div class="small">
                <b>1分</b>
                <br>
                <span>周学习时常</span>
            </div>
            <div>  |   </div>
             <div class="small">
                <b>0分</b>
                <br>
                <span>周学习课程</span>
            </div>
            <div>  |   </div>
             <div class="small">
                <b>0分</b>
                <br>
                <span>连续学习</span>
            </div>
           
        </div>
       
        <div class="day">
            <van-cell title="学习日历(点击选择日期)" :value="date" @click="show = true" />
             <van-calendar v-model="show" @confirm="onConfirm" />    
        </div>
    </div>
    <div>
        <div class="ri">
            <b>日榜</b>
            <div class="long">
                <div class="longNav">
                    <span>未上榜</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>慕函数10293875</span>
                </div>
               <div class="longNav1">
                    <span>1</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>lalals10293875</span>
                </div>
                 <div class="longNav1">
                    <span>2</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>呵呵12098</span>
                </div>
                 <div class="longNav1">
                    <span>3</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>嘟嘟6738</span>
                </div>
                 <div class="longNav1">
                    <span>4</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>小可爱2907</span>
                </div>
                 <div class="longNav1">
                    <span>5</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>大王90675</span>
                </div>
                 <div class="longNav1">
                    <span>6</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>小刘0293875</span>
                </div>
                 <div class="longNav1">
                    <span>7</span>
                    <span class="photo"><img src="learning/001.jpg" alt=""></span>
                    <span>贞子3875</span>
                </div>
            </div>
        </div>
    </div>
     
  </div>
</template>

<script>
export default {
      data() {
    return {
      date: '',
      show: false,
    };
  },
  methods: {
    
       back(){
        this.$router.go(-1);//返回上一层
        },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
    }
</script>

<style scoped>
.learn{
    width: 1005;
    margin: auto;
}
.learn .header{
    width: 2.4rem;
    height: 0.45rem;
    /* background-color: rgb(87, 211, 30); */
    display: flex;
   justify-content: space-around;
   align-items: center;
}
.big{
    width: 100%;
    margin-top: 0.2rem;
}
 .big .nav{
  width: 3.42rem;
height: 0.7rem;
display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  box-shadow: 0rem 0rem 0.05rem 0rem rgb(165, 163, 163);
}
.small b{
    margin-left: 0.23rem;
}
.small span {
    color: #818181;
}
.day{
    margin-left: 0.2rem;
    margin-top: 0.2rem;
}
.long{
    width: 100%;
}
.longNav {
    height: 0.59rem;
    background-color: #f89b72;
    margin-bottom: 0.1rem;
}
.longNav1{
    height: 0.59rem;
    /* background-color: #face7c; */
    margin-bottom: 0.1rem;
}
.longNav span,.longNav1 span{
    margin-left: 0.2rem;
}

.longNav1 .photo img{
   border-radius: 50%;

}
.van-cell__title span{
    display: block;
    width: 2.5rem;
    font-weight: 900;
    font-size: 0.16rem;
}
.ri b{
    color: grey;
}
</style>